<template>
  <div>
    <!-- xixix:{{ screenWidth }} -->
    <!-- <el-alert
      title="WARRING"
      type="warning"
      description="手机上传照片目前处于测试阶段，若出现使用异常得问题，请及时联系开发人员，谢谢！"
      show-icon
      center
    >
    </el-alert> -->
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>新建用户信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="用户姓名" prop="username">
            <el-input v-model="ruleForm.username" :label-width="formLabelWidth"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="call">
            <el-input type="call" maxlength="11" v-model.number="ruleForm.call" :label-width="formLabelWidth"
              auto-complete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="身份证号" prop="sfz">
            <el-input maxlength="18" v-model="ruleForm.sfz" label-width="140px" @blur="sex"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="sex">
            <el-input v-model="ruleForm.sex" label-width="140px" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>

      <el-col>
        <el-col :span="5">
          <el-form-item label="是否购车" prop="buy">
            <!-- <el-switch v-model="ruleForm.buy" @change="changeStatus"></el-switch> -->
            <el-switch v-model="ruleForm.buy" active-text="已购车" inactive-text="未购车" @change="changeStatus($event)">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="是否为新车" prop="newMoto">
            <el-switch v-model="ruleForm.newMoto" @change="changenewMoto($event)"></el-switch>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col>
        <el-col :span="5">
          <el-form-item label="车辆情况" prop="bx_true">
            <!-- <el-switch v-model="ruleForm.buy" @change="changeStatus"></el-switch> -->
            <el-switch v-model="ruleForm.bx_true" active-text="已购保险" inactive-text="未购保险">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="是否审车" prop="sc_true">
            <el-switch v-model="ruleForm.sc_true"></el-switch>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <!-- 默认false if yes to true -->
        <div :style="{ display: show }">
          <el-form-item label="购车时间">
            <el-col :span="8">
              <el-date-picker type="date" placeholder="购车时间" v-model="ruleForm.date1" style="width: 100%">
              </el-date-picker>
            </el-col>
            <el-col :span="6" :style="{ display: this.newShow, color: 'red' }">***请填写购车时间***</el-col>
          </el-form-item>

          <el-form-item label="车辆品牌" prop="Moto">
            <el-checkbox-group v-model="ruleForm.Moto">
              <el-checkbox label="豪爵" name="haojue"></el-checkbox>
              <el-checkbox label="铃木" name="suzuk"></el-checkbox>
              <el-checkbox label="新大洲本田" name="xdz"></el-checkbox>
              <el-checkbox label="五羊本田" name="wy"></el-checkbox>
              <el-checkbox label="上海建设" name="js"></el-checkbox>
              <el-checkbox label="珠峰" name="zf"></el-checkbox>
              <el-checkbox label="其他" name="other" @change="otherMoto">其他
                <el-input v-model="ruleForm.OtherMoto" :style="{ display: this.ShowMoto ? 'none' : '' }"></el-input>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-col :span="5">
            <el-form-item label="车辆型号" prop="MotoType">
              <!-- <el-col :span="5"> -->
              <el-input v-model="ruleForm.MotoType" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="购车价格" prop="Money">
              <!-- <el-col :span="5"> -->
              <el-input v-model="ruleForm.Money" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="车牌号" prop="brand">
              <el-input v-model="ruleForm.brand" autocomplete="off"></el-input>
              <!-- </el-col> -->
            </el-form-item>
          </el-col>
        </div>
      </el-col>
      <!-- 买保险 -->
      <el-col :span="24">
        <el-col :span="6">
          <el-form-item label="购保时间：">
            <el-date-picker type="date" placeholder="购保时间" v-model="ruleForm.date" style="width: 90%"></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 审车 -->
        <el-col :span="6">
          <el-form-item label="首次审车：">
            <el-date-picker type="date" placeholder="首次审车时间" v-model="ruleForm.date_sc" style="width: 90%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="初领驾驶证：">
            <el-date-picker type="date" placeholder="初次审领驾驶证时间" v-model="ruleForm.date_jsz" style="width: 90%">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-col>
      <!-- 买保险 -->
      <el-col :span="7">
        <el-form-item label="行驶证图片：" prop="img">
          <!-- 用于检测手机上传图片 -->
          <!-- <el-col
            :span="span_"
            :style="{ display: ruleForm.Mimg_0 != '' ? '' : 'none' }"
          >
            <el-image
              :src="ruleForm.Mimg_0"
              style="width: 144px; height: 146px"
            >
            </el-image>
            <el-col>
              <el-button type="info" round size="small" @click="gomobile"
                >修改</el-button
              >
              <el-button type="primary" round size="small" @click="bigimg(0)"
                >查看大图</el-button
              >
            </el-col>
          </el-col> -->
          <!-- 用于检测手机上传图片 -->
          <!-- 标记行驶证正面  -->
          <el-col :span="span_" :style="{ display: ruleForm.Mimg_0 != '' ? 'none' : '' }">
            <el-upload drag action="#" ref="upload" :limit="1" :src="ruleForm.img" list-type="picture-card"
              :on-preview="img" :on-remove="Re_img" :on-change="imgChange" :auto-upload="false">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>

            <!-- <el-button
              type="primary"
              size="mini"
              @click="gomobile"
              :disabled="ruleForm.img == '' ? false : true"
              >跳转到手机选择图片</el-button
            > -->
          </el-col>
          <!-- 行驶证反面 -->
          <!-- 用于检测手机上传图片 -->
          <!-- <el-col
            :span="span_"
            :style="{ display: ruleForm.Mimg_1 != '' ? '' : 'none' }"
          >
            <el-image
              :src="ruleForm.Mimg_1"
              style="width: 144px; height: 146px"
            >
            </el-image>
            <el-col>
              <el-button type="info" round size="small" @click="gomobile"
                >修改</el-button
              >
              <el-button type="primary" round size="small" @click="bigimg(1)"
                >查看大图</el-button
              >
            </el-col>
          </el-col> -->
          <!-- 用于检测手机上传图片 -->
          <!-- 标记行驶证反面  -->
          <el-col :span="span_" :style="{ display: ruleForm.Mimg_1 != '' ? 'none' : '' }">
            <el-upload drag action="#" ref="upload_img_xszfm" v-model="ruleForm.img_xszfm" list-type="picture-card"
              :on-preview="img_xszfm" :on-remove="Re_xszfm" :on-change="img_xszfm_change" :auto-upload="false">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="img_xszfm" alt />
            </el-dialog> -->
            <!-- <el-button
              type="primary"
              size="mini"
              @click="gomobile"
              :disabled="ruleForm.img_xszfm == '' ? false : true"
              >跳转到手机选择图片</el-button
            > -->
          </el-col>
          <!-- 反面 -->
        </el-form-item>
      </el-col>
      <!-- 合格证图片 -->
      <el-col :span="5">
        <el-form-item label="车辆合格证：" prop="img_qs">
          <!-- <el-col
            :span="span_"
            :style="{ display: ruleForm.Mimg_2 != '' ? '' : 'none' }"
          >
            <el-image
              :src="ruleForm.Mimg_2"
              style="width: 144px; height: 146px"
            >
            </el-image>
            <el-col style="width: 144%">
              <el-button type="info" round size="small" @click="gomobile"
                >修改</el-button
              >
              <el-button type="primary" round size="small" @click="bigimg(2)"
                >查看大图</el-button
              >
            </el-col>
          </el-col> -->
          <!-- 用于检测手机上传图片 -->
          <el-col :style="{ display: ruleForm.Mimg_2 != '' ? 'none' : '' }">
            <el-upload drag action="#" ref="upload_qs" v-model="ruleForm.img_qs" list-type="picture-card"
              :on-preview="img_qs" :limit="1" :on-remove="Re_img_qs" :on-change="img_qs_change" :auto-upload="false">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="img_qs" alt />
            </el-dialog>
            <el-button
              type="primary"
              size="mini"
              @click="gomobile"
              :disabled="ruleForm.img_qs == '' ? false : true"
              >跳转到手机选择图片</el-button
            > -->
          </el-col>
        </el-form-item>
      </el-col>
      <!-- 合格证 -->
      <!-- 新车合照 -->
      <el-col :span="5">
        <el-form-item label="新车合照：" prop="img_new">
          <!-- 用于检测手机上传图片 -->
          <!-- <el-col
            :span="span_"
            :style="{ display: ruleForm.Mimg_3 != '' ? '' : 'none' }"
          >
            <el-image
              :src="ruleForm.Mimg_3"
              style="width: 144px; height: 146px"
            >
            </el-image>
            <el-col style="width: 144%">
              <el-button type="info" round size="small" @click="gomobile"
                >修改</el-button
              >
              <el-button type="primary" round size="small" @click="bigimg(3)"
                >查看大图</el-button
              >
            </el-col>
          </el-col> -->
          <!-- 用于检测手机上传图片 -->
          <el-col :style="{ display: ruleForm.Mimg_3 != '' ? 'none' : '' }">
            <el-upload drag action="#" ref="upload_new" :limit="1" v-model="ruleForm.img_new" list-type="picture-card"
              :on-preview="img_new" :on-remove="Re_img_new" :on-change="img_new_change" :auto-upload="false">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="img_new" alt />
            </el-dialog>
            <el-button
              type="primary"
              size="mini"
              @click="gomobile"
              :disabled="ruleForm.img_new == '' ? false : true"
              >跳转到手机选择图片</el-button
            > -->
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="驾驶证：" prop="img_jsz">
          <!-- 用于检测手机上传图片 -->
          <!-- <el-col
            :span="span_"
            :style="{ display: ruleForm.Mimg_4 != '' ? '' : 'none' }"
          >
            <el-image
              :src="ruleForm.Mimg_4"
              style="width: 144px; height: 146px"
            >
            </el-image>
            <el-col style="width: 144%">
              <el-button type="info" round size="small" @click="gomobile"
                >修改</el-button
              >
              <el-button type="primary" round size="small" @click="bigimg(4)"
                >查看大图</el-button
              >
            </el-col>
          </el-col> -->
          <!-- 用于检测手机上传图片 -->
          <el-col :style="{ display: ruleForm.Mimg_4 != '' ? 'none' : '' }">
            <el-upload drag action="#" ref="upload_jsz" v-model="ruleForm.img_jsz" list-type="picture-card"
              :on-preview="img_jsz" :on-remove="Re_img_jsz" :on-change="img_jsz_change" :auto-upload="false" :limit="1">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="img_jsz" alt />
            </el-dialog>
            <el-button
              type="primary"
              size="mini"
              @click="gomobile"
              :disabled="ruleForm.img_jsz == '' ? false : true"
              >跳转到手机选择图片</el-button
            > -->
          </el-col>
        </el-form-item>
      </el-col>
      <!-- 新车合照 -->
      <el-col :span="24">
        <el-form-item label="备注" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<script>
import unit from "../../../unit/unit";
export default {
  name: "adduser",
  data() {
    return {
      // 添加成功
      options: [
        {
          value: "man",
          label: "男",
        },
        {
          value: "wuman",
          label: "女",
        },
        {
          value: "other",
          label: "保密",
        },
      ],
      addcomputed: false,
      dialogFormVisible: false,
      dialogTableVisible: false,
      dialogVisible: false,
      dialogImageUrl: "",
      show: "none",
      newShow: "none",
      ShowMoto: true,
      Motochecked: true,
      ruleForm: {
        username: "",
        call: "",
        sfz: "",
        sex: "",
        birthday: "",
        address: "", //详细地址
        buy: null,
        newMoto: false,
        brand: "", //车牌号
        date: "", //买保险日期
        date1: "", // 购车日期
        date_sc: "", //审车日期
        date_jsz: "", //初次驾驶证
        Moto: [],
        OtherMoto: "",
        MotoType: "",
        Money: "",
        desc: "",
        addtowns: "",
        img: "",
        img_xszfm: "",
        img_qs: "",
        img_new: "",
        img_jsz: "",
        // towns: "",
        code: null,
        code_sc: null, //审车排序用
        bx_true: false,
        sc_true: false,
        Mimg_0: "",
        Mimg_1: "",
        Mimg_2: "",
        Mimg_3: "",
        Mimg_4: "",
      },
      // 监控窗口大小
      fullWidth: document.documentElement.clientWidth,
      disture: "block",
      isImg: false, //图片上传窗口
      // 窗口小于900启用
      widthTrue: false,
      // 有无图片
      img_show: false,
      span_: 12,
      towns: "",
      formLabelWidth: "120px",
      rules: {
        username: [
          { required: true, message: "请输入用户姓名", trigger: "blur" },
        ],
        call: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          { type: "number", message: "联系电话必须为数字" },
        ],
      },
    };
  },
  created() {
    // 进入的时候清空temp，cookie页面等防止冲突
    // this.$axios({
    //   method: "POST",
    //   url: "/api/ed",
    //   data: {
    //     clear: true,
    //   },
    // }).then((res) => {});
    unit.setCookie("mouth", "");
    unit.setCookie("pages", "");
    unit.setCookie("selectdate", "");
  },
  mounted() {
    // this.widthTrue = this.fullWidth > 1700 ? false : true;
    this.span_ = this.fullWidth > 1700 ? 12 : 24;
    let that = this;
    // console.log(this.disture);
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.windowWidth = window.fullWidth; // 宽
        // console.log("实时屏幕宽度：", that.windowWidth);
        // this.widthTrue = that.windowWidth > 1700 ? false : true;
        this.span_ = that.windowWidth > 1700 ? 12 : 24;
        // console.log(this.widthTrue);
      })();
    };
  },
  methods: {
    // 标记

    bigimg(n) {
      switch (n) {
        case 0:
          window.open(this.ruleForm.Mimg_0);
          break;
        case 1:
          window.open(this.ruleForm.Mimg_1);
          break;
        case 2:
          window.open(this.ruleForm.Mimg_2);
          break;
        case 3:
          window.open(this.ruleForm.Mimg_3);
          break;
        case 4:
          window.open(this.ruleForm.Mimg_4);
          break;
      }
    },
    changeStatus(callback) {
      // console.log(callback);
      callback == true ? (this.show = "") : (this.show = "none");
    },
    changenewMoto(callback) {
      callback == true ? (this.newShow = "") : (this.newShow = "none");
    },
    Re_img(file, fileList) {
      // console.log(12);
      this.ruleForm.img = "";
    },
    Re_xszfm(file, fileList) {
      // console.log(12);
      this.ruleForm.xszfm = "";
    },
    Re_img_qs(file, fileList) {
      // console.log(12);
      this.ruleForm.img_qs = "";
    },
    Re_img_new(file, fileList) {
      // console.log(12);
      this.ruleForm.img_new = "";
    },
    Re_img_jsz(file, fileList) {
      // console.log(12);
      // this.img_jsz_show = "block";
      this.ruleForm.img_jsz = "";
    },
    //跳转到手机选择图片

    img(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgChange(file, fileList) {
      // console.log(777);
      // this.img_show = true;
      this.ruleForm.img = file.raw;
    },
    // 车辆合格证
    img_qs(file) {
      this.img_qs = file.url;

      this.dialogVisible = true;
    },
    img_qs_change(file, fileList) {
      // this.img_qs_show = "none";
      this.ruleForm.img_qs = file.raw;
    },
    // 新车合照
    img_new(file) {
      this.img_new = file.url;
      this.dialogVisible = true;
    },
    img_new_change(file, fileList) {
      // this.img_new_show == "none";
      this.ruleForm.img_new = file.raw;
    },
    // 驾驶证
    img_jsz(file) {
      this.img_jsz = file.url;
      this.dialogVisible = true;
    },
    img_jsz_change(file, fileList) {
      // this.img_jsz_show == "none";
      this.ruleForm.img_jsz = file.raw;
    },
    img_xszfm(file) {
      this.img_xszfm = file.url;
      this.dialogVisible = true;
    },
    img_xszfm_change(file, fileList) {
      // this.img_sxzfm_show == "none";
      this.ruleForm.img_xszfm = file.raw;
    },
    // 行驶证反面
    // 数据上传
    submitForm(ruleForm) {
      this.ruleForm.LoginInfo = JSON.parse(localStorage.isLogin).UAdminPhone;

      // console.log(this.ruleForm);
      if (this.ruleForm.newMoto && this.ruleForm.date1 == "") {
        this.$message.error("请填写购车时间！");
        return false;
      }
      for (let key in this.ruleForm.Moto) {
        if (this.ruleForm.Moto[key] == "其他") {
          let index = this.ruleForm.Moto.indexOf("其他");
          this.ruleForm.Moto.splice(index, 1, this.ruleForm.OtherMoto);
        }
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.ruleForm.date =
            this.ruleForm.date == null ? "" : this.ruleForm.date;
          this.ruleForm.date_sc =
            this.ruleForm.date_sc == null ? "" : this.ruleForm.date_sc;
          this.ruleForm.date1 =
            this.ruleForm.date1 == null ? "" : this.ruleForm.date1;

          if (this.ruleForm.date != null && this.ruleForm.date != "") {
            let date_ = this.ruleForm.date
              .toLocaleDateString()
              .slice(5, 7)
              .replace("/", "");
            this.ruleForm.code = date_;
            this.ruleForm.date = this.ruleForm.date.toLocaleDateString();
          }
          if (this.ruleForm.date_sc != null && this.ruleForm.date_sc != "") {
            let date_ = this.ruleForm.date_sc
              .toLocaleDateString()
              .slice(5, 7)
              .replace("/", "");
            this.ruleForm.code_sc = date_;
            this.ruleForm.date_sc = this.ruleForm.date_sc.toLocaleDateString();
          }
          // 购车日期
          if (this.ruleForm.date1 != null && this.ruleForm.date1 != "") {
            this.ruleForm.date1 = this.ruleForm.date1.toLocaleDateString();
          }
          // 初次驾驶证
          if (this.ruleForm.date_jsz != null && this.ruleForm.date_jsz != "") {
            this.ruleForm.date_jsz =
              this.ruleForm.date_jsz.toLocaleDateString();
          }
          let formData = new FormData();
          for (let key in this.ruleForm) {
            formData.append(key, this.ruleForm[key]);
          }
          // 添加按钮 提交到数据库
          formData.append("EStoreName", JSON.parse(localStorage.isLogin).EStoreName)
          this.$axios({
            method: "POST",
            url: "/api/addCustomer",
            data: formData,
          }).then((res) => {
            if (res.data.status === 1) {
              this.ruleForm.date1 = "";
              this.ruleForm.date = "";
              this.ruleForm.date_sc = "";
              this.ruleForm.date_jsz = "";
              this.ruleForm.Mimg_0 = "";
              this.ruleForm.Mimg_1 = "";
              this.ruleForm.Mimg_2 = "";
              this.ruleForm.Mimg_3 = "";
              this.ruleForm.Mimg_4 = "";
              this.$refs.upload.clearFiles();
              this.$refs.upload_qs.clearFiles();
              this.$refs.upload_new.clearFiles();
              this.$refs.upload_jsz.clearFiles();
              this.$refs.upload_img_xszfm.clearFiles();
              this.$refs[ruleForm].resetFields();
              this.show = "none";
              this.show_fm = "none";
              this.newShow = "none";
              this.$message({
                message: "添加成功！",
                type: "success",
              });
            }
          });
        } else {
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$axios({
        method: "POST",
        url: "/api/ed",
        data: {
          clear: true,
        },
      }).then((res) => { });
      this.ruleForm.date1 = "";
      this.ruleForm.date = "";
      this.ruleForm.date_sc = "";
      this.ruleForm.date_jsz = "";
      this.ruleForm.Mimg_0 = "";
      this.ruleForm.Mimg_1 = "";
      this.ruleForm.Mimg_2 = "";
      this.ruleForm.Mimg_3 = "";
      this.ruleForm.Mimg_4 = "";
      this.$refs.upload.clearFiles();
      this.$refs.upload_qs.clearFiles();
      this.$refs.upload_new.clearFiles();
      this.$refs.upload_jsz.clearFiles();
      this.$refs.upload_img_xszfm.clearFiles();
      this.$refs[formName].resetFields();
      this.show = "none";
      this.show_fm = "none";
      this.newShow = "none";
    },
    // 添加按钮
    add() {
      this.dialogFormVisible = true;
      this.ruleForm.addtowns = "";
    },
    // 判断男女
    sex() {
      if (this.ruleForm.sfz.length == 18) {
        let temp = this.ruleForm.sfz;
        this.ruleForm.sex = temp.charAt(16) % 2 == 0 ? "女" : "男";
        // 处理生日
        this.ruleForm.birthday =
          temp.substring(6, 10) +
          "-" +
          temp.substring(10, 12) +
          "-" +
          temp.substring(12, 14);
      }
    },
    // 其他摩托
    otherMoto() {
      this.ShowMoto = this.ShowMoto ? false : true;
    },
  },
  components: {},
};
</script>
<style>
.el-col .el-upload .little {
  height: 42px !important;
}
</style>